<template>
  <el-dialog v-model="visible" :width="props.width">
    <template #title>
      <div class="drawer-header">
        <div class="flex items-center dot" v-if="showDot">
          <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
          <span class="ml-2 drawer-title">{{ props.title }}</span>
        </div>
      </div>
    </template>
    <div class="flex justify-around add-commodity">
      <div class="commodity-card-left w-[100%]">
        <el-form label-width="110px" :model="queryParams" ref="formRef" label-position="left">
          <el-row>
            <el-col :span="10">
              <el-form-item label="商品名称/ID：" prop="productId">
                <el-input v-model="queryParams.commodityName" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="20px">
                <el-button color="#3721FF" type="primary" @click="handleQuery">查询</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <ContentWrap class="commodity-card">
          <div class="flex justify-between mb-20px">
            <div class="commodity-list w-[28%] h-[400px] overflow-y-auto">
              <div class="mb-20px"><span class="font-bold">商品分类</span></div>
              <div
                class="flex items-center mb-20px text-[#3721FF] bg-[#F7F6FF] h-[40px] px-4 rounded-lg"
              >
                <img
                  class="w-[20px] h-[20px] mr-5px"
                  src="https://img2.baidu.com/it/u=3118608147,331926958&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                  alt=""
                />
                <span>商品列表</span>
                <span>（共{{ categoryList.length }}个）</span>
              </div>
              <!-- 分类树 -->
              <el-tree
                :data="categoryList"
                :props="defaultProps"
                node-key="id"
                :default-expand-all="true"
                @node-click="treeSelectChange"
              >
                <template #default="{ node }">
                  <span class="custom-tree-node">{{ node.label }}</span>
                </template>
              </el-tree>
            </div>
            <!-- 商品列表 -->
            <div class="w-[70%]">
              <el-table
                class-name="rounded-lg overflow-y-auto"
                :data="productPageList"
                :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#333' }"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"/>
                <el-table-column label="商品ID">
                  <template #default="{ row }">
                    <span v-copyText="row.id"
                    >{{ row.id }}
                      <Icon icon="ep:copy-document" :size="12" class="cursor-pointer"/>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="cover" label="商品封面">
                  <template #default="{ row }">
                    <div class="overflow-hidden rounded-lg">
                      <img class="w-[50px] h-[50px]" :src="row.cover" alt=""/>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="商品名称"/>
                <el-table-column prop="originalPrice" label="价格"/>
              </el-table>
              <Pagination
                v-model:limit="queryParams.pageSize"
                v-model:page="queryParams.pageNo"
                :total="total"
                size="small"
                @pagination="handleGetProductPage"
              />
            </div>
          </div>
        </ContentWrap>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer el-dia-btn">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" color="#3721FF" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// import { getCategoryList } from '@/api/mall/product/category'
import {defaultProps, handleTree} from '@/utils/tree'
import {getCategoryList} from '@/api/publicInterf/index'
import {ProductApi} from '@/api/product/addProduct'

const emit = defineEmits(['close', 'update:selProductList', 'selectionChange', 'confirm'])
const categoryList = ref([])
const total = ref(0)
const productPageList = ref([])
const selectedProductList = ref([])
// const selectProductClass = ref()
const productClass = ref()
const props = defineProps({
  isAddCategory: {
    type: Boolean,
    default: false
  },
  showDot: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '添加商品'
  },
  width: {
    type: String
  }
})
const handleSelectionChange = (val: any) => {
  //emit('update:selProductList', val)
  // emit('selectionChange',val)
  selectedProductList.value = val;
}
//
const handleGetProductPage = (id) => {
  ProductApi.getProductPage({id: id}).then((res) => {
    productPageList.value = res.list
    total.value = res.total
  })
}
const treeSelectChange = (row: { [key: string]: any }) => {
  console.log('productClass', row)
  // selectProductClass.value = row
  handleGetProductPage(row.id)
}
const handleGetCategory = async () => {
  const res = await getCategoryList()
  categoryList.value = handleTree(res)
}
const queryParams = ref({
  pageSize: 10,
  pageNo: 1,
  commodityName: ''
})
onMounted(() => {
  handleGetCategory()
})
const visible = ref(false)

const handleClose = () => {
  visible.value = false
}
const show = () => {
  visible.value = true
}
const hide = () => {
  visible.value = false
}

const handleQuery = () => {

}

const handleConfirm = () => {
  visible.value = false;
  emit('confirm', selectedProductList.value);
}
watch(
  () => visible.value,
  (val) => {
    emit('update:visible', val)
    handleGetCategory
  }
)
defineExpose({
  show,
  hide
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
